<template>
  <div class="activity-detail" v-if="activity">
    <h1>{{ activity.name }}</h1>
    <img :src="activity.image" alt="活动图片" class="activity-image" />
    <p><strong>分类:</strong> {{ activity.category }}</p>
    <p><strong>发布时间:</strong> {{ formatDate(activity.startTime) }}</p>
    <p><strong>结束时间:</strong> {{ formatDate(activity.endTime) }}</p>
    <div class="activity-content">
      <h2>活动内容</h2>
      <p>{{ activity.content }}</p>
    </div>
    <button @click="goBack">返回</button>
  </div>
  <div v-else>
    <p>加载中...</p>
  </div>
</template>
<!--. 说明-->
<!--动态获取活动详情:-->

<!--在 mounted 钩子中调用 fetchActivityDetail 方法。-->
<!--使用 Axios 发送 GET 请求到 API，获取活动详情。请根据你的后端接口替换 https://api.example.com/activities/${activityId}。-->
<!--将响应的数据赋值给 activity。-->
<!--加载状态:-->

<!--如果数据正在加载，显示“加载中...”信息；数据加载完成后显示活动详情。-->
<!--3. 确保 API 可用-->
<!--在实际使用时，请确保后端 API 能够返回活动详情的数据，并且响应格式符合预期。例如，响应可能类似于以下 JSON 结构：-->
<!--{-->
<!--"id": 1,-->
<!--"name": "示例活动",-->
<!--"image": "https://via.placeholder.com/600x400",-->
<!--"category": "教育",-->
<!--"startTime": "2024-10-01T10:00:00Z",-->
<!--"endTime": "2024-10-10T18:00:00Z",-->
<!--"content": "这是一个关于教育的活动，旨在提高学习兴趣和知识水平。"-->
<!--}-->

<!--4. 运行项目-->
<!--重新启动项目并导航到活动详情页面，确保活动 ID 在 URL 中正确传递（例如 /activity/1），你应该能看到动态获取的活动详情。-->


<script setup name="Activity">
// import axios from 'axios';
import { listActivity, getActivity, delActivity, addActivity, updateActivity } from "@/api/shop/activity/activity_detail";

export default {
  data() {
    return {
      activity: null,
    };
  },
  mounted() {
    this.fetchActivityDetail();
  },
  methods: {
    async fetchActivityDetail() {
      const activityId = this.$route.params.id; // 从路由参数获取活动 ID
      try {
        const response = await axios.get(`https://api.example.com/activities/${activityId}`); // 替换为你的 API URL
        this.activity = response.data; // 设置活动数据
      } catch (error) {
        console.error('获取活动详情失败:', error);
      }
    },
    formatDate(dateString) {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
      return new Date(dateString).toLocaleString('zh-CN', options);
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.activity-detail {
  padding: 20px;
  max-width: 800px;
  margin: auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.activity-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.activity-content {
  margin-top: 20px;
}
</style>
